{include file="common/header"/}
<div class="lemo-container">
    <div class="lemo-main">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>商品列表</legend>
            <blockquote class="layui-elem-quote">
                <div class="tabletop">
                    <div class="layui-inline">
                        <!--                        <label class="layui-form-label">搜索{:lang('username')}</label>-->
                        <div class="layui-input-inline">
                            <input type="text" name="keys" id="keys" lay-verify="required" autocomplete="off"
                                   class="layui-input">
                        </div>
                        <button type="submit" class="layui-btn layui-btn-sm" lay-submit lay-filter="" id="search">
                            {:lang('search')}
                        </button>
                        <!-- <a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-danger"
                            data-href="{:url('delete')}" id="delAll">{:lang('delete checked')}</a> -->
                        <a href="javascript:;" class="layui-btn layui-btn-sm layui-btn-warm add"
                           data-href="{:url('add')}" id="add">添加商品</a>
                    </div>

                </div>
            </blockquote>
        </fieldset>
        <table class="layui-table" id="list" lay-filter="list"></table>
    </div>
</div>

<script type="text/html" id="action">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" data-href="{:url('del')}?id={{d.id}}">{:lang('del')}</a>
    <a class="layui-btn layui-btn-success layui-btn-xs" lay-event="edit" data-href="{:url('edit')}?id={{d.id}}">{:lang('edit')}</a>
</script>

<!-- 商品分类 -->
<script type="text/html" id="type">
    {{# if (d.category && d.categoryTwo){ }}
    {{d.category.title}}
    {{d.categoryTwo.title}}
    {{# } }}
</script>

<!-- 开关按钮 -->
<script type="text/html" id="hot">
    <input type="checkbox" status="{{d.is_hot}}" value="{{d.id}}" {{# if (d.is_hot==1) { }}checked=""{{# } }} name="open" lay-skin="switch" lay-filter="hot">
</script>
<script type="text/html" id="discount">
    <input type="checkbox" status="{{d.is_discount}}" value="{{d.id}}" {{# if (d.is_discount==1) { }}checked=""{{# } }} name="open" lay-skin="switch" lay-filter="discount">
</script>
<script type="text/html" id="upscale">
    <input type="checkbox" status="{{d.is_upscale}}" value="{{d.id}}" {{# if (d.is_upscale==1) { }}checked=""{{# } }} name="open" lay-skin="switch" lay-filter="upscale">
</script>

<script type="text/html" id="create_time">
    {{layui.util.toDateString(d.create_time*1000, 'yyyy-MM-dd HH:mm:ss')}}
</script>

{include file="common/footer"/}
<script>
    var tableIn = null;
    layui.config({
        base: "/static/admin/js/",
        version: true
    }).extend({
        Admin: 'Admin'
    }).use(['table', 'Admin', 'form'], function () {
        var table = layui.table,
            form = layui.form,
            $ = layui.$;

        tableIn = table.render({
            elem: '#list',
            url: '{:url("index")}',
            method: 'post',
            cols: [[
                // {checkbox: true, fixed: 'left'},
                {field: '', title: 'ID', width: 80, sort: true, type: 'numbers'},
                {field: 'goods_name', title: '商品名称', width: 150},
                {
                    field: 'image', title: '图片', width: 150, align: 'center',
                    templet: function (d) {
                        return '<div ><img src="' + d.image + '" alt="" width="50px" height="50px" onclick="showBigImage(this)"></a></div>';
                    }
                },
                {field: 'shopinfo', title: '店铺', width: 150, templet: function (d) {
                    return d.shopinfo.name
                    }},
                {field: 'id', title: '分类', width: 150, templet: '#type'},
                {field: 'is_discount', title: '特价', width: 150, templet: '#discount'},
                {field: 'is_hot', title: '热卖', width: 150, templet: '#hot'},
                {field: 'is_upscale', title: '高档', width: 150, templet: '#upscale'},
                {field: 'create_time', title: '时间', width: 180, templet: '#create_time'},
                {title: '操作', width: 200, toolbar: '#action', align: "center", fixed: 'right'}
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
        });

        // 热卖_状态被切换
        form.on('switch(hot)', function (d) {
            $.get("{:url('set_hot')}", { goods_id: d.value }, function (e) {
                if (e.code == 0) {
                    layer.msg('操作成功', { time: 800 });
                } else {
                    layer.msg('操作失败', { time: 1000 });
                }
            });
        });

        // 特价_状态切换
        form.on('switch(discount)', function (d) {
            $.get("{:url('setdiscount')}", { goods_id: d.value }, function (e) {
                if (e.code == 0) {
                    layer.msg('操作成功', { time: 800 });
                } else {
                    layer.msg('操作失败', { time: 1000 });
                }
            });
        });

    });


    /**
     * @param e 图片对象
     */
    function showBigImage(obj) {
        var img = new Image();
        img.src = obj.src;
        var height = img.height + 50; //获取图片高度
        var width = img.width; //获取图片宽度
        var imgHtml = "<img src='" + obj.src + "' />";
        //弹出层
        layer.open({
            type: 1,
            shade: 0.8,
            offset: 'auto',
            area: [width + 'px',height+'px'],
            shadeClose:true,//点击外围关闭弹窗
            scrollbar: false,//不现实滚动条
            title: "图片预览", //不显示标题
            content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            cancel: function () {
                //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
            }
        });
    }

</script>